<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>${Title}</title>
    <style>
        .summary {
            border-collapse: separate;
            text-indent: initial;
            border-spacing: 2px;
        }

        .item-header {
            font-weight: bold;
            padding-right: 6px;
        }

        .item-content {
            text-align: right;
            font-weight: bold;
        }

        .item-content--passed {
            color: green;
        }

        .item-content--failed {
            color: brown;
        }

        .item-content--other {
            color: orange;
        }

        .link-container {
            padding-bottom: 6px;
        }

        .link {
            text-decoration-line: none;
            color: darkblue;
        }

        .link:hover {
            opacity: 0.6;
        }

        .link:active {
            opacity: 0.3;
        }

        ul {
            padding-inline-start: 20px;
        }

    </style>
</head>
<body>
<h1>${Title}</h1>
<pre class="options">${Options}</pre>
<h2>Summary</h2>
<table class="summary">
    <tr>
        <td class="item-header">Total</td>
        <td class="item-content">${Total}</td>
    </tr>
    <tr>
        <td class="item-header">Passed</td>
        <td class="item-content item-content--passed">${Passed}</td>
    </tr>
    <tr>
        <td class="item-header">Failed</td>
        <td class="item-content item-content--failed">${Failed}</td>
    </tr>
    <tr>
        <td class="item-header">Ignored</td>
        <td class="item-content item-content--other">${Ignored}</td>
    </tr>
    <tr>
        <td class="item-header">Excluded through lists</td>
        <td class="item-content item-content--other">${ExcludedThroughLists}</td>
    </tr>
    <tr>
        <td class="item-header">Excluded by other reasons</td>
        <td class="item-content item-content--other">${ExcludedByOtherReasons}</td>
    </tr>
</table>
<h2>Failed tests list</h2>
<ul>
    ${FailedTestsList}
</ul>
</body>
</html>